<template>
	<view class="content">
		<view v-if="!changeSuccess">
			<view class="uni-form-item uni-column"><input type="tel" class="uni-input" name="" placeholder="请输入手机号" v-model="phone" @blur="login" /></view>

			<view class="uni-form-item uni-column column-with-btn">
				<input type="number" class="uni-input" name="" placeholder="请输入验证码" v-model="yanzheng" />
				<button :class="{ active: !disableCodeBtn }" :disabled="disableCodeBtn" @tap="sendCode">{{ codeBtn.text }}</button>
			</view>
			<view class="uni-form-item uni-column"><input type="password" class="uni-input" name="" placeholder="请输入新密码" v-model="possword" /></view>
			
			<view class="submit" @click="getLogin">
			<image src="../../static/kitty-BasicLogin/register.png" mode="aspectFit"></image>
			</view>
			<!-- <button type="primary" @click="getLogin">提交</button> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			changeSuccess: false,
			captchaImg: '',
			seconds: 60, //验证码时间
			codeBtn: {
				text: '获取验证码',
				waitingCode: false,
				count: this.seconds
			},
			phone: '',
			yanzheng: '',
			possword: '',
			yan: ''
		};
	},
	onLoad() {},

	methods: {
		sendCode: function() {
			this.codeBtn.waitingCode = true;
			this.codeBtn.count = this.seconds;
			this.codeBtn.text = this.codeBtn.count + 's';

			let countdown = setInterval(() => {
				this.codeBtn.count--;
				this.codeBtn.text = this.codeBtn.count + 's';
				if (this.codeBtn.count < 0) {
					clearInterval(countdown);
					this.codeBtn.text = '重新发送';
					this.codeBtn.waitingCode = false;
				}
			}, 1000);
			this.$ajax('/api/v1.user/getSmsCode', {
				type: 'forgot',
				mobile: this.phone
			})
				.then(res => {
					uni.showToast({
						title: '验证码发送完成',
						icon: 'none'
					});
				})
				.catch(res => {
					console.log(Error);
				});
		},
		login() {
			if (!/^1[3456789]\d{9}$/.test(this.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					duration: 2000,
					icon: 'none'
				});
				return;
			}else if(!/^\d{6}$/.test(this.possword) && this.possword==''){
				uni.showToast({
					title: '密码最少6位',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
		},
		getLogin() {
			this.$ajax('api/v1.user/forgot', {
				smscode: this.yanzheng,
				telephone: this.phone,
				password: this.possword
			})
				.then(res => {
					uni.navigateTo({
						url: 'login'
					});
				})
				.catch(res => {
					console.log(Error);
				});
		}
	},
	computed: {
		disableCodeBtn: function() {
			return this.codeBtn.waitingCode;
		}
	}
};
</script>

<style lang="scss" scoped>
$color-primary: #128ef9;
.content {
	padding: 100upx 30upx;
	overflow: hidden;
}
.uni-form-item {

	margin-bottom: 30rpx;
	padding: 0;
	border-bottom: 1px solid #e3e3e3;
	.uni-input {
		font-size: 30rpx;
		padding: 7px 0;
	}
}
.column-with-btn {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	button {
		font-size: 24rpx;
		margin: 0;
		width: 180rpx;
		text-align: center;
		margin-bottom: 28upx;
		&:after {
			border: none;
		}
		&.active {
			background-color: $color-primary;
			color: $uni-text-color-inverse;
		}
	}
}
.img-captcha {
	width: 150rpx;
	height: 60rpx;
}
button[type='primary'] {
	background-color: $color-primary;
	border-radius: 0;
	font-size: 34rpx;
	margin-top: 60rpx;
}
.text-reset {
	text-align: center;
	margin-bottom: 100rpx;
	font-size: 36rpx;
}
.submit{
	width: 100%;
	height: 85upx;
	margin-top: 100upx;
	image{
		width: 100%;
		height: 100%;
	}
}
</style>
